<template>
    <j-modal title="问诊记录" :width="1200" :visible="visible" switchFullscreen @ok="handleOk" @cancel="handleCancel"
        cancelText="关闭">
        <a-card :bordered="false">
            <div class="rVi">
                <div class="rVit">患者信息</div>
                <div class="rVic">
                    <div class="rVicl">
                        <img :src="getFileAccessHttpUrl(patientInfo.image)" alt="" />
                    </div>
                    <div class="rVicr">
                        <div class="rVicri"><span>姓名：</span>{{ patientInfo.name }}</div>
                        <div class="rVicri"><span>性别：</span>{{ patientInfo.sex }}</div>
                        <div class="rVicri"><span>出生日期：</span>{{ patientInfo.birth }}</div>
                        <div class="rVicri"><span>地址：</span>{{ patientInfo.address }}</div>
                        <div class="rVicri"><span>身份证号：</span>{{ patientInfo.idCard }}</div>
                        <div class="rVicri"><span>联系电话：</span>{{ patientInfo.phone }}</div>
                        <div class="rVicri"><span>血型：</span>{{ patientInfo.bloodType }}</div>
                        <div class="rVicri"><span>过敏史：</span>{{ patientInfo.allergy }}</div>
                        <div class="rVicri"><span>邮箱地址：</span>{{ patientInfo.mail }}</div>
                        <div class="rVicri"><span>医保卡号：</span>{{ patientInfo.medicareCard }}</div>
                    </div>
                </div>
            </div>
            <div class="rVi">
                <div class="rVit">问诊回放</div>
                <div class="rVic">
                    <a-button type="primary" @click="downLoadFile(videoUrl)">查看回放</a-button>
                </div>
            </div>
            <div class="rVi">
                <div class="rVit">问诊资料 (共 {{ fileList.length }} 项)</div>
                <div class="rVic rVicx">
                    <div class="rVici rVicia" v-for="(i, o) in fileList" :key="o" @click="downLoadFile(i)">{{
                        i.split('preview/')[1] }}</div>
                </div>
            </div>
            <div class="rVi">
                <div class="rVit">参诊人员</div>
                <div class="rVic rVicx">
                    <div class="rVici rViciuser" v-for="(i, o) in record.wzOnlineInquiryUser" :key="o">
                        <img class="rViciimg" :src="getFileAccessHttpUrl(i.image)" alt="" />
                        <div class="rVicic">
                            <div>{{ i.name }} ( {{ i.dept_dictText }} )</div>
                            <div class="rVicico">{{ i.orgId_dictText }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rVi">
                <div class="rVit">问诊报告</div>
                <div class="rVip">
                    <div class="rVipi">
                        <p>疾病名称分类：</p>
                        <div>{{ reportInfo.illnessClass }}</div>
                    </div>
                    <div class="rVipi">
                        <p>治疗描述：</p>
                        <div>{{ reportInfo.healDesc }}</div>
                    </div>
                    <div class="rVipi">
                        <p>诊断结果：</p>
                        <div>{{ reportInfo.diagnosis }}</div>
                    </div>
                    <div class="rVipi">
                        <p>处方信息：</p>
                        <div>{{ reportInfo.prescription }}</div>
                    </div>
                    <div class="rVipi">
                        <p>是否需要复诊：</p>
                        <div>{{ reportInfo.isVisit ? '是' : '否' }}</div>
                    </div>
                    <div class="rVipi" v-if="reportInfo.isVisit">
                        <p>复诊时间：</p>
                        <div>{{ reportInfo.visitDate }}</div>
                    </div>
                    <div class="rVipi">
                        <p>备注：</p>
                        <div>{{ reportInfo.remark }}</div>
                    </div>
                </div>
            </div>
        </a-card>
    </j-modal>
</template>

<script>
import { getAction, getFileAccessHttpUrl } from '@/api/manage';
export default {
    data() {
        return {
            getFileAccessHttpUrl,
            visible: false,
            record: {},
            patientInfo: {
            },
            fileList: [],
            userList: [],
            reportInfo: {},
            videoUrl: '',
        }
    },
    methods: {
        show(record) {
            this.visible = true;
            this.record = record;
            getAction('/wz/patient/wzPatientInfo/queryById', { id: record.wzReserve.patientId }).then(res => {
                this.patientInfo = res.result;
            })
            getAction('/wz/heal/wzHealRecord/queryByRoomId', { roomId: record.id }).then(res => {
                this.reportInfo = res.result;
            })
            getAction('/wz/online/wzOnlineInquiry/getPlayback', { id: record.id }).then(res => {
                this.videoUrl = res.result
            })
            this.getFileListData()
        },
        handleCancel() {
            this.visible = false
        },
        handleOk() {

        },
        downLoadFile(url) {
            window.open(getFileAccessHttpUrl(url));
        },
        getFileListData() {
            getAction('/wz/online/wzOnlineInquiry/getShareFile', { id: this.record.id }).then(res => {
                if (res.result && res.result.length > 0) {
                    this.fileList = res.result.split(',')
                } else {
                    this.fileList = []
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.rVi {
    .rVit {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;

        &::before {
            content: '';
            display: block;
            width: 4px;
            height: 22px;
            border-radius: 3px;
            background-color: #00B494;
            margin-right: 10px;
        }
    }

    .rVic {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .rVicl {
            box-shadow: 0 0 12px #ccc;
            border-radius: 50%;
            overflow: hidden;
            width: 120px;
            height: 120px;
            margin-right: 20px;

            img {
                width: 120px;
                height: 120px;
            }
        }

        .rVicr {
            width: calc(100% - 120px);
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .rVicri {
                width: 33%;
                margin-bottom: 10px;
                color: #000;

                span {
                    color: #777;
                }
            }
        }

        .rVici {
            width: 18%;
            margin-bottom: 10px;
        }
    }
}

.rVicia {
    color: #008dff;

    &:hover {
        cursor: pointer;
        text-decoration: underline;
    }
}

.rVicx {
    flex-wrap: nowrap;
    overflow-x: auto;

    .rVicia {
        margin-right: 20px;
        width: auto !important;
    }

    .rViciuser {
        margin: 0 20px;
    }
}

.rViciuser {
    display: flex;
    align-items: center;

    .rViciimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 0 8px;
        margin-right: 10px;
    }

    .rVicic {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .rVicico {
            width: 135px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
}

.rVip {
    .rVipi {
        display: flex;
        font-size: 15px;
        margin-bottom: 10px;

        p {
            min-width: 120px;
            text-align: right;
            color: #444;
            margin: 0;
        }

    }
}
</style>